

<template>
  <!-- 本组件是用于统计中复用的代码，减少数据冗余 -->
  <div class="flex">
    <div class="time-item" :class="{ active :item.selected }" @click="handleClickTimeLabel(item)" v-for="(item,index) in times" :key="index">
      {{item.label}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      times: [
        {
          label: "今天",
          value: "TODAY",
          selected: false,
        },
        {
          label: "昨天",
          value: "YESTERDAY",
          selected: false,
        },
        {
          label: "最近7天",
          value: "LAST_SEVEN",
          selected: true,
        },
        {
          label: "最近30天",
          value: "LAST_THIRTY",
          selected: false,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    // 点击事件回调信息
    handleClickTimeLabel(val) {
      this.times.map(item=>{item.selected = false})
      val.selected = true;
      this.$emit("changed", val.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.time-item {
  font-weight: normal;
  margin: 0 6rpx;
  color: #999;
  font-size: 24rpx !important;
}
.active {
  font-weight: bold;
  color: #333 !important;
}
</style>